<template>
  <!-- APP风险分析 -->
  <div
    class="chart-container"
    id="home2"
    style="width: 100%; height: 100%"
  ></div>
</template>

<script>
import * as echarts from "echarts";
import { getAppRiskCount } from "@/api/applicationService/applicationScreen.js";
export default {
  name: "",
  data() {
    return {
      chart: null,
      trafficWay: [],
    };
  },
  mounted() {
    getAppRiskCount().then((res) => {
      this.trafficWay = res.data || [];
      this.initChart2();
    });
  },

  methods: {
    /**
     * 初始化图表
     */
    initChart2() {
      var chartDom = document.getElementById("home2");
      var myChart = echarts.init(chartDom);
      window.addEventListener("resize", () => {
        myChart.resize();
      });
      var option;

      const trafficWay = this.trafficWay;
      let sum = trafficWay.reduce((cur, pre) => {
        return cur + pre.value;
      }, 0);

      let data = [];
      let legendData = [];
      var color = [
        "#00ffff",
        "#409B5C",
        "#006ced",
        "#ffe000",
        "#ffa800",
        "#ff5b00",
        "#ff3000",
      ];
      for (var i = 0; i < trafficWay.length; i++) {
        let name = trafficWay[i].name + "  " + trafficWay[i].value;
        legendData.push(name);
        data.push(
          {
            value: trafficWay[i].value,
            name: name,
            itemStyle: {
              borderWidth: 0,
              borderRadius: 10,
              shadowBlur: 10,
              borderColor: color[i],
              shadowColor: color[i],
            },
          },
          {
            value: sum / 100, // 控制每个环形之间的间隙
            name: "",
            itemStyle: {
              label: {
                show: true,
              },
              labelLine: {
                show: true,
              },
              color: "rgba(0, 0, 0, 0)",
              borderColor: "rgba(0, 0, 0, 0)",
              borderWidth: 0,
            },
          }
        );
      }
      let seriesOption = [
        {
          name: "",
          type: "pie",
          clockwise: false,
          radius: ["35%", "55%"],
          center: ["50%", "50%"],
          emphasis: {
            scale: false,
          },
          labelLine: {
            show: true,
            length2: 1,
          },
          label: {
            textStyle: {
              color: "#fff",
              fontWeight: "bolder",
              fontSize: 10,
            },
            show: true,
          },
          data: data,
        },
      ];
      option = {
        title: {
          subtext: sum,
          textStyle: {
            color: "#19E1E3",
            fontSize: 20,
          },
          subtextStyle: {
            fontSize: 20,
            fontWeight: "bolder",
            color: "#19E1E3",
          },
          x: "50%",
          y: "50%",
        },
        color: color,
        tooltip: {
          show: false,
        },
        legend: {
          icon: "rect",
          itemWidth: 12,
          itemHeight: 6,
          show: true,
          itemStyle: {
            borderWidth: 2,
          },
          orient: "vertical",
          data: legendData,
          right: "5%",
          top: "middle",
          align: "left",
          textStyle: {
            color: "#fff",
            fontWeight: "bolder",
            fontSize: 12,
            padding: [0, 0, 0, 5],
          },
          itemGap: 12,
        },
        grid: {
          top: 5,
        },
        toolbox: {
          show: true,
          right: "5%",
          top: "5%",
          feature: {
            saveAsImage: { show: true },
            restore: { show: true }
          }
        },
        series: seriesOption,
      };
      option && myChart.setOption(option);
    },
  },
};
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 100%;
}
</style>
